<template>
  <div>
        <Button type="primary" @click="modelAdd = true">添加</Button>
        <Button type="error" @click="removes">删除多个</Button>
        <Input v-model="filter.desc">
            <Button slot="append" icon="ios-search" @click = "seachData"></Button>
        </Input>
        <Table border ref="selection" @on-selection-change="onSelectionChange" :columns="columns" :data="data"></Table>
        <page :total = "total" :page-size="filter.rows" :page-size-opts="[5,10,15,20]" @on-page-size-change="onPagesizeChange" @on-change="onPage" show-sizer></page>
        <Modal
            v-model="modelAdd"
            title="Common Modal dialog box title">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="Desc" prop="desc">
                    <Input v-model="formValidate.desc" placeholder="Enter your desc"></Input>
                </FormItem>
            </Form>
             <div slot="footer">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')">重置</Button>
            </div>
        </Modal>
  </div>
      
</template>
<script>
    //import {dataMixins}  from '../common/dataMixins';
    export default {
        //mixins : [dataMixins],
        data () {
            return {
                // modules:'news',
            modelAdd:false,
            type:1,
            editId : '',
            tree:[],
            data: [],
            total:0,
            commentNum:{
                num:0
            },
            filter:{
               page:1,
               rows:5,
               desc:'',
               cateId:''
            },
            ids:[],
              modules:'comment',
              formValidate: {
                    desc: ''
                },
                ruleValidate: {
                    desc: [
                        { required: true, message: 'The title cannot be empty', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'Desc',
                        key: 'desc'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editIdata(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => { 
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        },
        methods: {
        removes(){
            this.$Modal.confirm({
                title: '确认删除对话框',
                content: '<p>是否删除多条</p>',
                onOk: () => {
                    fetch(`http://localhost:3000/comment/removes`,{
                        method:'post',
                        headers:{
                            'Content-Type':'application/json'
                        },
                        body : JSON.stringify({ids : this.ids.toString() })
                        }).then(res=>{
                        return res.json()
                        }).then(data=>{
                        this.$Message.info('删除成功');
                        this.commentNum.num -= this.ids.length;
                        fetch(`http://localhost:3000/products/data/${this.filter.cateId}`,{
                            method:'put',
                            headers:{
                                'Content-Type':"application/json"
                            },
                            body:JSON.stringify(this.commentNum)
                        ,}).then(res=>{
                            return res.json();
                        }).then(data=>{
                            console.log(data);
                        });
                        this.getData();
                        })
                }
            });
        },
        onSelectionChange(selection){
            var selectionIds = [];
            for(let i = 0;i<selection.length;i++){
                selectionIds.push(selection[i]._id)
            }
            this.ids = selectionIds;
            console.log(selectionIds)
        },
        seachData(){
            this.getData()
        },
        onPagesizeChange(pagesize){
            this.filter.rows = pagesize;
            this.getData();
        },
        onPage(page){
            this.filter.page = page;
            this.getData();
        },
        handleSubmit (name) {
           
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.editId.length > 0){
                        //修改
                        this.$Message.success('修改成功!');
                        fetch(`http://localhost:3000/comment/data/${this.editId}`,{
                                method:'put',
                                headers:{
                                    'Content-Type':"application/json"
                            },
                                body:JSON.stringify(this.formValidate),
                        }).then(res=>{
                                return res.json()
                        }).then(data=>{
                                this.modelAdd = false;
                                
                                this.getData();
                                
                                Object.assign(
                                    this.$data.formValidate,
                                    this.$options.data().formValidate
                                );
                                
                        })
                    }else{
                        //新增
                        //this.getData();
                        this.formValidate.cateId = this.filter.cateId;
                        this.$Message.success('添加成功!');
                        fetch(`http://localhost:3000/comment/data`,{
                                method:'post',
                                headers:{
                                    'Content-Type':"application/json"
                            },
                                body:JSON.stringify(this.formValidate)
                            }).then(res=>{
                                return res.json()
                            }).then(data=>{
                                this.modelAdd = false;
                                this.commentNum.num++;
                                //console.log(this.commentNum.num)
                                fetch(`http://localhost:3000/products/data/${this.filter.cateId}`,{
                                method:'put',
                                headers:{
                                    'Content-Type':"application/json"
                                },
                                body:JSON.stringify(this.commentNum)
                                }).then(res=>{
                                    return res.json();
                                }).then(data=>{
                                    console.log(data);
                                });
                                this.getData();
                                Object.assign(
                                    this.$data.formValidate,
                                    this.$options.data().formValidate
                                );
                            })
                    }                       
                } else {
                    this.$Message.error('添加失败!');
                }
            })
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },   
        editIdata (id) {
            fetch(`http://localhost:3000/comment/data/${id}`)
            .then(res=>{
                return res.json();
            }).then(data=>{
                console.log(data);
                this.modelAdd = true;
                this.formValidate = data;
                this.editId = id;
            })
        },
        remove (id) {
            this.$Modal.confirm({
                title: '确认删除对话框',
                content: '<p>是否删除</p>',
                onOk: () => {
                    fetch(`http://localhost:3000/comment/data/${id}`,{
                      method:'delete'
                    }).then(res=>{
                      return res.json()
                    }).then(data=>{
                      this.$Message.info('删除成功');
                      this.commentNum.num --;
                      fetch(`http://localhost:3000/products/data/${this.filter.cateId}`,{
                        method:'put',
                        headers:{
                            'Content-Type':"application/json"
                        },
                        body:JSON.stringify(this.commentNum)
                        }).then(res=>{
                            return res.json();
                        }).then(data=>{
                            console.log(data);
                        });
                      this.getData();
                    })
                }
            });
        },
        getData(){
            this.filter.cateId= this.$router.history.current.query.productsId;
            var bodyString = JSON.stringify(this.filter);
            console.log(bodyString)
            fetch(`http://localhost:3000/comment/list`,{
            method:'post',
            headers:{
              'Content-Type':"application/json"
            },
            body:bodyString
            }).then(res=>{
            return res.json();
            }).then(data=>{
            
            this.data = data.rows;
            this.total = data.total;
            this.commentNum.num = data.total;
            console.log(this.commentNum.num)
          })
        }
    },
    created(){
      this.getData();
    }
    }
</script>